<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script src="/lib/react.js"></script>
  <script src="/lib/react-dom.js"></script>
  <script src="/lib/babel.js"></script>
  <script type="text/babel">
    class App extends React.Component {
      constructor() {
        super();
        this.state = {
          isShow: true,
        };
      }
      taggle() {
        this.setState({
          isShow: !this.state.isShow,
        });
      }
      render() {
        const { isShow } = this.state
        let ele = null
        if(isShow){
            ele = <span>哈哈哈</span>
        }
        return (
          <div>
            <button 
                onClick={() => this.taggle()}
            >切换</button>
            <h1>{ele}</h1>
          </div>
        );
      }
    }

    const rootEl = document.querySelector("#root");
    const root = ReactDOM.createRoot(rootEl);
    root.render(<App/>);
  </script>
</html>
